<template>
  <div class="body">
    <!-- 登录主体 -->
    <div class="login">
      <form action="">
        <h1>登录</h1>
        <div class="login_table">
          <svg class="icon icon-back left" aria-hidden="true">
            <use xlink:href="#icon-shouji"></use>
          </svg>
          <input type="tel" name="" id="" placeholder="请输入手机号" />
          <span>提示：请输入正确的手机号</span>
        </div>
        <div class="login_table">
          <svg class="icon icon-back left" aria-hidden="true">
            <use xlink:href="#icon-mima"></use>
          </svg>
          <input
            type="password"
            name=""
            id=""
            placeholder="请输入不小于8位数字的密码"
          />
          <span>提示：请输入大于8位并且小于16位字母数字组合的密码</span>
        </div>
        <button type="submit">登录</button>
      </form>
      <div class="login_tip">
        <input type="checkbox" name="" id="" /><label
          >我已阅读并同意《XXX》、《XXX》</label
        >
      </div>
      <div class="login_bottom">
        <span>忘记密码</span>
        <span>|</span>
        <span>新用户注册</span>
      </div>
    </div>
    <!-- 熊的动图 -->
    <div class="bottom">
      <div class="bottom_bg1"></div>
      <div class="bottom_bg2"></div>
      <div style="height: 200px"></div>
      <div class="bottom_bear"></div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.icon {
  width: 14%;
  height: 100%;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.left {
  float: left;
}

.body {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(66, 66, 66, 0.4); */
}

.login {
  position: relative;
  top: 14%;
  width: 40%;
  height: 70%;
  margin: auto auto;
  text-align: center;
  padding: 0.5%;
  background-color: rgba(255, 255, 255, 0.5);
  border: 1px solid #66afe9;
  z-index: 999;
}

.login h1 {
  margin-top: 2.8%;
  margin-bottom: 6%;
  font-size: 28px;
}

.login .login_table {
  width: 90%;
  height: 45px;
  line-height: 45px;
  margin-left: 5.5%;
  margin-bottom: 8%;
  text-align: center;
  vertical-align: middle;
  border: 1px solid #b5d9f7;
  border-radius: 4px;
  /* background-color: aqua; */
}

.login .login_table input {
  width: 76%;
  height: 95%;
  text-align: center;
  font-size: 1.2em;
  border-radius: 4px;
  border: 1px solid transparent;
  color: #6a6f77;
  background-color: transparent;
  -web-kit-appearance: none;
  -moz-appearance: none;
  display: block;
  padding: 0 1em;
  text-decoration: none;
  outline: 0;
}
.login .login_table span {
  font-size: 9px;
  color: #898a8b;
}

input:focus {
  border-color: #66afe9 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
    0 0 8px rgba(102, 175, 233, 0.6);
}

.login button {
  width: 90%;
  height: 45px;
  font-size: 1.4em;
  line-height: 45px;
  margin-top: 20px;
  margin-bottom: 40px;
  background-color: #c3e1f9;
  border: 1px solid #b5d9f7;
}

.login .login_tip {
  position: absolute;
  bottom: 90px;
  left: 135px;
}

.login .login_bottom {
  position: absolute;
  bottom: 20px;
  left: 163px;
}

.login .login_bottom > span {
  margin-right: 15px;
}
.bottom {
  position: absolute;
  bottom: 0px;
  width: 100%;
  height: 336px;
}
.bottom .bottom_bg1 {
  float: left;
  width: 100%;
  height: 336px;
  background: url(@/assets/login/bg1.png) no-repeat;
}
.bottom .bottom_bg2 {
  float: left;
  position: relative;
  left: 0;
  bottom: 632px;
  width: 100%;
  height: 570px;
  background: url(@/assets/login/bg2.png) no-repeat;
  opacity: 0.3;
}
.bottom .bottom_bear {
  position: relative;
  width: 200px;
  height: 100px;
  background: url(@/assets/login/bear.png) no-repeat;
  /* 我们元素可以添加多个动画， 用逗号分隔 */
  animation: bear 0.4s steps(8) infinite, move 3s forwards;
}
@keyframes bear {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1600px 0;
  }
}
@keyframes move {
  0% {
    left: 0;
  }
  100% {
    left: 50%;
    /* margin-left: -100px; */
    transform: translateX(-50%);
  }
}
</style>